<template>
    <div>

        <el-card>

            <el-input v-model="Yhuid" size="small" style="width: 240px;margin:0px 5px" placeholder="请输入uid"
                clearable></el-input>
            <el-input v-model="Country" size="small" style="width: 240px;margin:0px 5px" placeholder="请输入地区"
                clearable></el-input>


            <el-button type="primary" icon="el-icon-search" size="mini" @click="Thoroughfare()">查询</el-button>
            <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="AddThoroug()">新增用户计费</el-button>

            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <br>
            <br>


            <el-table :data="tableData.pageList" style="width: 100%" id="apiIndex">
                <el-table-column type="index" width="50" fixed align="center" />
                <el-table-column fixed prop="user" align="center" label="用户账号" />
                <el-table-column fixed prop="username" align="center" label="用户名称" />
                <el-table-column fixed prop="country" align="center" label="地区" />
                <el-table-column fixed prop="uid" align="center" label="uid" />
                <el-table-column fixed prop="countryId" align="center" label="国家编号" />
                <el-table-column fixed prop="countryISO" align="center" label="ISC_Code" />
                <el-table-column fixed prop="priceMCC" align="center" label="MCC单价" />
                <el-table-column fixed prop="priceMNC" align="center" label="MNC单价" />
                <el-table-column fixed prop="mnc" align="center" label="MNC" />
                <el-table-column fixed prop="mcc" align="center" label="MCC" />
                <el-table-column fixed prop="mark" align="center" label="备注" />
                <el-table-column label="产品操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" plain
                            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" plain
                            @click="handleDelect(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增 -->
            <el-dialog title="新增用户计费" center width="30%" :visible.sync="adddialogThour" :close-on-click-modal="false">
                <el-form :model="addformThur">

                    <el-form-item label="用户账号:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="addformThur.user" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="地区:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="addformThur.country" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="MCC单价:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="addformThur.priceMCC" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="MNC单价:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="addformThur.priceMNC" autocomplete="off"></el-input>
                    </el-form-item>


                    <!-- 产品备注1 -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="AddThour()">确 定</el-button>

                    <el-button @click="adddialogThour = false">取 消</el-button>
                </div>
            </el-dialog>
            <!-- 新增 -->


            <!-- 修改 -->

            <el-dialog title="修改用户计费" center width="30%" :visible.sync="editdialogThour" :close-on-click-modal="false">
                <el-form :model="editformThur">

                    <el-form-item label="用户账号:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="editformThur.user" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="MCC单价:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="editformThur.priceMCC" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="MNC单价:" :label-width="formLabelWidth">
                        <el-input class="inputwith" v-model="editformThur.priceMNC" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editThour()">确 定</el-button>

                    <el-button @click="editdialogThour = false">取 消</el-button>
                </div>
            </el-dialog>

            <br>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.totalCount" class="paging">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
import { DelUserBilling, QueryUserBilling, EditUserBilling, AddUserBilling } from '@/api/thoroughfare/user'

export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            Yhuid: '',
            Country: '',
            tableData: [],
            formLabelWidth: "100px",
            editdialogThour: false,
            adddialogThour: false,
            delectdialogThour: false,
            editformThur: {
                id: '',
                user: '',
                priceMCC: '',
                priceMNC: '',
            },
            addformThur: {
                user: '',
                country: '',
                priceMCC: '',
                priceMNC: '',
            }
        }
    },
    async created() {
        this.Thoroughfare()
    },
    methods: {
        // 删除
        handleDelect(index, row) {
            const delectdialogIds = row.id
            this.$modal.confirm(`删除后无法恢复!确认删除ID为${delectdialogIds}的数据`).then(function () {
                return DelUserBilling({ id:delectdialogIds })
            }).then((res) => {
                this.$modal.msgSuccess(res.data);
                this.Thoroughfare()

            }).catch(() => {
             });
        },
       
        // 新增用户计费
        async AddThoroug() {
            this.adddialogThour = true
        },
        async AddThour() {
            let addRes = await AddUserBilling(this.addformThur)
            if (addRes.code == 200) {
                this.$message({
                    message: addRes.data,
                    type: "success",
                });
                this.adddialogThour = false

                this.Thoroughfare()
            } else {
                this.$message({
                    message: addRes.msg,
                    type: "error",
                });
            }
        },


        handleEdit(index, row) {
            this.editdialogThour = true
            this.editformThur.id = row.id
            this.editformThur.user = row.user
            this.editformThur.priceMCC = row.priceMCC
            this.editformThur.priceMNC = row.priceMNC
        },
        async editThour() {
            let res = await EditUserBilling(this.editformThur)
            if (res.code == 200) {
                this.$message({
                    message: res.data,
                    type: "success",
                });

                this.editdialogThour = false
                this.Thoroughfare()
            } else {
                this.$message({
                    message: res.msg,
                    type: "error",
                });
            }
        },

        //  查询
        async Thoroughfare() {

            let thoroug = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                uid: this.Yhuid,
                country: this.Country

            }
            let resThoroug = await QueryUserBilling(thoroug)
            if (resThoroug.code == 200) {
                this.tableData = resThoroug.data
            }
        },
        resetQuery() {
            this.Yhuid = ""
            this.Country = ""
            this.Thoroughfare()
        },
        async handleSizeChange(val) {
            this.pageSize = val;
            this.Thoroughfare();
        },
        async handleCurrentChange(val) {
            this.pageNum = val;
            this.Thoroughfare();
        },

    },
};


</script>
<style scoped>
.inputwith {
    width: 80%;
    margin: 1px 0px;
}

.paging {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}</style>